import React, { Component } from 'react';
import { connect } from 'dva';
import { Progress } from 'antd';
import styles from './vitalSignsStatistics.css';
import { Statistics } from '@/models/connect';
import CommList from './commList';
import { vitalSignsExport } from '@/services/statistics';
import { Dispatch, AnyAction } from 'redux';
import { isMenuVisible } from '@/utils/utils';

interface VitalSignsStatisticsProps {
  statistics?: Statistics;
  loading: boolean;
  dispatch: Dispatch<AnyAction>;
}

class VitalSignsStatistics extends Component<VitalSignsStatisticsProps> {
  constructor(props: VitalSignsStatisticsProps) {
    super(props);
    this.state = {
      visible: true,
      drugApi: 'statistics/vitalSignsList',
      detailsUrl: '/statistics/details/vitalSignsDetail', //跳转路径详情页
      expApi: 'statistics/drugListEx', //导出
    };
  }
  componentWillMount() {
    if (localStorage.getItem('isTrue')) {
      this.setState({
        visible: false,
      });
    }
    const { dispatch } = this.props;
    dispatch({
      type: 'statistics/vitalSignsStatistics',
      payload: { deviceTypeNo: this.props.deviceTypeNo },
    });
    localStorage.removeItem('isTrue');
  }
  render() {
    const { statistics = {} } = this.props;
    return this.state.visible && isMenuVisible('iot:vitalSignsLog:statistical') ? (
      <div className={styles['inforStatic-container-right']}>
        <div className={styles['inforStatic-topText']}>
          <i className={styles.topText}>生命体征信息采集概览</i>
        </div>
        <div className={styles['portrait-box']}>
          <img src={require('@/assets/images/infostatic/portrait-bg.png')} alt="" />
        </div>
        <div className={styles.textBox}>
          <img src={require('@/assets/images/infostatic/change-bg.png')} alt="" />
        </div>
        <div className={styles['collection-box']}>
          <div className={styles['collection-box-cencus']}>
            <Progress
              type="circle"
              className={[styles.progress, styles.progress1].join(' ')}
              width={120}
              strokeWidth={10.5}
              percent={(statistics.dayCount / statistics.everyCount) * 100}
            />
            <Progress
              type="circle"
              className={[styles.progress, styles.progress2].join(' ')}
              width={200}
              strokeWidth={6}
              percent={(statistics.weekCount / statistics.everyCount) * 100}
            />
            <Progress
              type="circle"
              className={[styles.progress, styles.progress3].join(' ')}
              width={285}
              strokeWidth={4}
              percent={(statistics.monthCount / statistics.everyCount) * 100}
            />
            <Progress
              type="circle"
              className={[styles.progress, styles.progress4].join(' ')}
              width={379}
              strokeWidth={3}
              percent={statistics.everyCount / (statistics.everyCount / 100)}
            />
          </div>
          <div className={styles['collection-box-text']}>
            <div className={styles['collection-box-text-textBox']}>
              <span>今日采集 </span>
              <span>{statistics.dayCount}条</span>
            </div>
            <div className={styles['collection-box-text-textBox']}>
              <span>近一周采集 </span>
              <span>{statistics.weekCount}条</span>
            </div>
            <div className={styles['collection-box-text-textBox']}>
              <span>近30天采集 </span>
              <span>{statistics.monthCount}条</span>
            </div>
            <div className={styles['collection-box-text-textBox']}>
              <span>信息总数 </span>
              <span>{statistics.everyCount}条</span>
            </div>
          </div>
        </div>
        {isMenuVisible('iot:vitalSignsLog:list') && (
          <div className={styles['change-box']} onClick={() => this.setState({ visible: false })}>
            <img src={require('@/assets/images/change.png')} alt="" />
          </div>
        )}
      </div>
    ) : (
      <CommList
        drugApi={this.state.drugApi}
        deviceTypeNo={this.props.deviceTypeNo}
        name="生命体征列表.xlsx"
        search={'iot:vitalSignsLog:businessInfo'}
        menuId={'iot:vitalSignsLog:exportList'}
        detailsUrl={this.state.detailsUrl}
        type={'0'}
        expApi={this.state.expApi}
        commListEx={vitalSignsExport}
      />
    );
  }
}

export default connect(({ loading, statistics }: any) => ({
  loading: loading.effects['statistics/vitalSignsStatistics'],
  statistics: statistics.statistics,
}))(VitalSignsStatistics);
